Parent | Child | Previous | Next
 
JavaScript

panelObject.addPanel Method

Syntax

panelObj.addPanel(panelSettings);

Arguments

panelSettings

Settings that define properties for the new panel. Can have the following properties:

namestring

The Name of the new Panel.

titlestring

The title for the new Panel.

srcA5.PanelCard

A panel card object that defines the contents of the Panel.

closeboolean

true/false. Adds close button to panel if true. For use with Panel Navigator with Tab Bands.

Description

Adds a panel to a Panel Navigator

You can create Panels at run-time and dynamically add them to the Panel Navigator. The Panel Navigator's .addPanel() method can be called to add Panels. Similarly, you can remove Panels from a Panel Navigator at run-time.

function addNewPanel() {
    var id = {dialog.object}.getValue('panelNum');
    if (id == '') {
        alert('Please type a number in the textbox before clicking the button');
        return false;
    }

    //specify a unique name for the new Panel
    var panelName = 'NEWPANEL_' + id;
    var panelTitle = 'Pane ' + id;

    //define a new Panel Card
    var myNewPanelCard = new A5.PanelCard({
        theme : '{dialog.style}',
        body: {
            content: {
                type: 'html',
                src: 'this is my new panel text for: ' + panelName
                }
            }
        });

    //get a pointer to the Panel Navigator where the new Panel will be added
    var pNav = {dialog.object}.panelGet('PANELNAVIGATOR_1');

    if (pNav) {
        //add the new Panel Card to the Panel Navigator

        pNav.addPanel({
            name: panelName,
            title: panelTitle,
            src: myNewPanelCard
        });

        //optionally, set focus to the new Panel
        pNav.setActivePanel(panelName);
    }
}

Closing Dynamically Added Panel

If the dynamic panel is added to a Panel Navigator that has been configured to use Tab Bands as the method for navigating the child Panels, you can allow the user to close a dynamically added Panel. When the .addPanel() method is called, the JSON object that defines the new Panel can specify that the close button should be included by defining the close property in the panel settings object:

close: true

For example

//get a pointer to the Panel Navigator where the new Panel will be added
var pNav = {dialog.object}.panelGet('PANELNAVIGATOR_1');

if (pNav) {
    //add the new Panel Card to the Panel Navigator
    pNav.addPanel({
        name: panelName ,
        title: panelTitle,
        src : myNewPanelCard,
        close: true
    });
}

In the image below, Pane4 was added dynamically with the close option set to true. As you can see, the Tab Band label for the Pane includes a close icon. If you tap on the close icon, the Pane is closed and is removed from the Panel Navigator.

images/closedynamicpanel.jpg